<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
    <link rel="stylesheet" href="./lib/throttle.css" />
  </head>

  <body>
    <!-- 外层的盒子 -->
    <div class="box">
      <!-- 思聪 -->
      <img src="./img/photo.gif" class="photo" alt="" />
    </div>

    <!-- 发射的按钮 -->
    <button class="btn btn-primary btn-fire">Fire</button>

    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>
      $(function () {
        let isOK = false // 定义一个标识位
        $(".btn-fire").on("click", function () {
          if (isOK) return // 如果标识位为空直接回去
          isOK = true
          // 1. 动态创建子弹的 DOM 对象
          const newBall = $('<img src="./img/bullet.png" class="ball" alt="" />')
          // 2. 将子弹添加到页面的盒子中
          $(".box").append(newBall)
          // 3. 执行动画
          // 只允许一秒钟发送一枚炮弹
          newBall.animate({ left: "95%" }, 1000, "linear", function () {
            // 当动画完成之后，移除这个子弹
            $(this).remove()
            isOK = false // 一秒之后 恢复状态 表示可以发送
          })
        })
      })

      // 秒杀 假的！！！！！
      function onSubmit() {
        // 进入这个方法 1亿次- 100次请求
        // 后端也有节流 要求你2秒之内只能访问一次
        if (!this.timeId) {
          this.timeId = setTimeout(function () {
            // 秒杀逻辑
            this.timeId = null
          }, 1000)
        }
      }
    </script>
  </body>
</html>
